import React, { PureComponent, Fragment } from 'react';
import { FormattedMessage, formatMessage } from 'umi/locale';
import router from 'umi/router';
import { connect } from 'dva';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Row, Col, Tooltip, Icon, Tag, Form, Modal, Input, message } from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;

const EditForm = Form.create()(props => {
  const { modalVisible, form, handleModalVisible, handleEdit, detail } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleEdit(fieldsValue, form);
    });
  };

  return (
    <Modal
      title={formatMessage({ id: 'app.dm.device.remarkName.edit' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem style={{ marginBottom: 0 }}>
          {form.getFieldDecorator('id', { initialValue: detail.id })(<Input type="hidden" />)}
        </FormItem>
        <FormItem label={formatMessage({ id: 'app.dm.devices.info.remarkName' })} colon={false}>
          {form.getFieldDecorator('remarkName', {
            rules: [],
            initialValue: detail.desc,
          })(<TextArea rows={2} />)}
        </FormItem>
      </div>
    </Modal>
  );
});

@connect(({ devices, loading }) => ({
  devices,
  loading: loading.models.devices,
}))
@Form.create()
class DeviceInfo extends PureComponent {
  state = {
    modalVisible: false,
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleEdit = (fieldsValue, form) => {
    const { dispatch } = this.props;
    const { handleModalVisible } = this;
    dispatch({
      type: 'devices/edit',
      payload: {
        id: fieldsValue.id,
        remarkName: fieldsValue.remarkName,
      },
      form,
      handleModalVisible,
    });
  };

  handleView = id => {
    router.push(`/dm/product/detail/${id}`);
  };

  render() {
    const { detail } = this.props;

    const { modalVisible } = this.state;

    const showNodeType = type => {
      if (type === 1) {
        return <FormattedMessage id="app.dm.product.info.type.device" />;
      }
      if (type === 2) {
        return <FormattedMessage id="app.dm.product.info.type.gateway" />;
      }
      return null;
    };

    const showDeviceState = state => {
      if (state === 1) {
        return <FormattedMessage id="app.dm.devices.info.notactive" />;
      }
      if (state === 2) {
        return <FormattedMessage id="app.dm.devices.info.enable" />;
      }
      if (state === 3) {
        return <FormattedMessage id="app.dm.devices.info.disabled" />;
      }
      if (state === 4) {
        return <FormattedMessage id="app.dm.devices.info.online" />;
      }
      if (state === 5) {
        return <FormattedMessage id="app.dm.devices.info.offline" />;
      }
      return null;
    };

    const parentMethods = {
      detail,
      handleEdit: this.handleEdit,
      handleModalVisible: this.handleModalVisible,
    };

    return (
      <Fragment>
        <Row>
          <span style={{ fontWeight: 'bold', fontSize: 20 }}>
            <FormattedMessage id="app.dm.devices.info" />
          </span>
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.info.productName" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {detail.productName}
          </Col>
          <Col className={styles.info_item} span={3}>
            ProductKey
          </Col>
          <Col className={styles.info_con} span={5}>
            <span>{detail.productKey}</span>
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.info.nodetype" />
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {showNodeType(detail.type)}
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.info.name" />
          </Col>
          <Col className={styles.info_con} span={5}>
            {detail.name}
          </Col>
          <Col className={styles.info_item} span={3}>
            <FormattedMessage id="app.dm.devices.info.label" />
          </Col>
          <Col className={styles.info_con} span={5}>
            <span>{detail.label}</span>
            <CopyToClipboard
              text={detail.label}
              onCopy={() =>
                message.success(formatMessage({ id: 'app.dm.devices.info.label.copy.success' }))
              }
            >
              <a style={{ marginLeft: 10 }}>
                {formatMessage({ id: 'app.dm.devices.info.label.copy' })}
              </a>
            </CopyToClipboard>
          </Col>
          <Col className={styles.info_item} span={3}>
            <span>
              <FormattedMessage id="app.dm.devices.info.remarkName" />
            </span>
            <em className={styles.optional} style={{ marginLeft: 5 }}>
              <Tooltip title={<FormattedMessage id="app.dm.devices.info.remarkName.help" />}>
                <Icon type="info-circle-o" style={{ marginLeft: 4 }} />
              </Tooltip>
            </em>
          </Col>
          <Col className={styles.info_con_end} span={5}>
            {detail.remarkName}
            <a style={{ marginLeft: 10 }} onClick={() => this.handleModalVisible(true)}>
              <FormattedMessage id="app.dm.device.info.edit" />
            </a>
          </Col>
        </Row>
        <Row>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.device.info.creatTime" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={5}>
            {detail.createTime}
          </Col>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.device.info.lastuptime" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={5}>
            {detail.lastUpTime}
          </Col>
          <Col className={styles.info_item_bottom} span={3}>
            <FormattedMessage id="app.dm.device.info.state" />
          </Col>
          <Col className={styles.info_con_end_bottom} span={5}>
            <Tag color="#108ee9">{showDeviceState(detail.state)}</Tag>
          </Col>
        </Row>

        {detail.gatewayProductName && detail.gatewayProductKey && detail.gatewayDeviceName ? (
          <div style={{ marginTop: 20 }}>
            <Row>
              <span style={{ fontWeight: 'bold', fontSize: 20 }}>
                <FormattedMessage id="app.dm.devices.info.gateway" />
              </span>
            </Row>
            <Row style={{ marginTop: 15 }}>
              <Col className={styles.info_item_bottom} span={3}>
                <FormattedMessage id="app.dm.devices.info.gateway.productName" />
              </Col>
              <Col className={styles.info_con_end_bottom} span={5}>
                {detail.gatewayProductName}
                <a
                  style={{ marginLeft: 10 }}
                  onClick={() => this.handleView(detail.gatewayProductId)}
                >
                  <FormattedMessage id="app.dm.devices.info.product.view" />
                </a>
              </Col>
              <Col className={styles.info_item_bottom} span={3}>
                <FormattedMessage id="app.dm.devices.info.gateway.productKey" />
              </Col>
              <Col className={styles.info_con_end_bottom} span={5}>
                <span>{detail.gatewayProductKey}</span>
              </Col>
              <Col className={styles.info_item_bottom} span={3}>
                <FormattedMessage id="app.dm.devices.info.gateway.deviceName" />
              </Col>
              <Col className={styles.info_con_end_bottom} span={5}>
                {detail.gatewayDeviceName}
              </Col>
            </Row>
          </div>
        ) : (
          undefined
        )}

        <EditForm {...parentMethods} modalVisible={modalVisible} />
      </Fragment>
    );
  }
}

export default DeviceInfo;
